<template>
	<view class="staff_cont">
		<view class="main_body">
			<view class="logo_title">
				<view class="logo">
					<image src="../../static/login/logo.png" mode=""></image>
				</view>
				<view class="title">
					商家登录
				</view>
			</view>

			<view class="login_form">
				<!-- <u--form labelPosition="left" labelWidth="100" :model="model1" ref="uForm">
					<u-form-item label="品牌名称" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="model1.userInfo.name" placeholder="请输入品牌名称" border="none"></u--input>
					</u-form-item>
					</u--form> -->
				<view class="account">
					<view class="account_icon">
						<image src="../../static/login/user.png" mode=""></image>
					</view>
					<view class="divider">

					</view>
					<view class="account_input">
						<u--input v-model="account" placeholder="请输入账号" border="none"></u--input>
					</view>
				</view>
				<view class="password">
					<view class="pw_icon">
						<image src="../../static/login/password.png" mode=""></image>
					</view>
					<view class="divider">

					</view>
					<view class="account_input">
						<u--input v-model="password" placeholder="请输入密码" border="none" type="password"></u--input>
					</view>
				</view>
			</view>

			<view class="remember_pw">
				<u-checkbox-group v-model="checkboxValue" placement="column" @change="groupChange">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxlist1" :key="index"
						:label="item.name" :name="item.name" shape="squera" @change="checkboxChange">
					</u-checkbox>
				</u-checkbox-group>
			</view>

			<view class="login_btn fl-center" @click="login()">
				<view class="">
					登录
				</view>
			</view>

			<view class="tip">
				提醒：还没有账号？忘记密码？联系婚选服务人员
			</view>
		</view>
		<view class="staff_bg">
			<!-- <image src="../../static/login/seller_login_bg.png" mode=""></image> -->
			<view class="nh">
				您好~
			</view>
			<view class="welcome">
				欢迎登录商家接单后台
			</view>
			<view class="service_type">
				客资派单服务   |   订单到店服务   |  代邀约服务  
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				password: '',
				checkboxlist1: [{
					name: '记住密码',
					disabled: false
				}],
				checkboxValue:[],
			};
		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			checkboxChange(n) {
				console.log('checkboxChange', n);
			},
			login() {
				console.log('login')
				var that = this;
				if (that.mobile == '') {
					uni.showToast({
						title: '请输入账号或者手机号',
						icon: "none"
					});
					return false;
				}
				if (that.publics.patt1.test(that.mobile)) {
					uni.showToast({
						title: '账号或者手机号不能为空',
						icon: "none"
					});
					return false;
				}
							
				if (!that.publics.password.test(that.password)) { // 判断密码
					uni.showToast({
						title: '密码格式错误,拼音+数字,不能低于六位',
						icon: "none"
					});
					return false;
				};
				
				if(this.Privacy==false){
					uni.showToast({
						title: '请勾选用户协议',
						icon: "none"
					});
					return false;
				}
				
				this.configure.ajax({
					url: 'user/login/bhyxLogin',
					// url: 'login',
					tishi: that.tishi,
					zhuang:1,
					data: {
						username: that.mobile,
						password: that.password,
						// code:that.code,
						uuid:that.uuid,
						type:that.type
					},
					method: 'POST',
					success: function(res) {
						console.log('dddddddddddd')
						console.log(res)
						if(res.code==1){
							// that.configure.login.commit("hide_login")
							uni.setStorageSync('token_token', res.data.token);
							uni.setStorageSync('shopaddress', res.data.user.shopaddress);
							that.publics.reLaunch("/pages/index/index")
						}else{ 
							uni.showToast({
								title: res.msg,
								icon: "none"
							});
							that.tuxing()
						}
						
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fl-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.staff_cont {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		position: fixed;
		left: 0;
		top: 0;
	}

	.main_body {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 410rpx;
		padding-top: 83rpx;
		box-sizing: border-box;
		border-radius: 43rpx 43rpx 0 0;
		position: absolute;
		z-index: 9;
		background-color: #FDFEFF;
	}

	.logo_title {
		display: flex;
		align-items: center;

		.logo {
			width: 92rpx;
			height: 92rpx;
			margin-right: 20rpx;

			image {
				width: 92rpx;
				height: 92rpx;
			}
		}

		.title {
			font-weight: 700;
			font-size: 58rpx;
			color: #000000;
		}
	}

	.login_form {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 72rpx;

		.account {
			width: 542rpx;
			height: 75rpx;
			background: #F2F8FD;
			border-radius: 34rpx;
			display: flex;
			align-items: center;
			padding: 12rpx 28rpx;
			box-sizing: border-box;
			margin-bottom: 43rpx;
		}

		.password {
			width: 542rpx;
			height: 75rpx;
			background: #F2F8FD;
			border-radius: 34rpx;
			display: flex;
			align-items: center;
			padding: 12rpx 28rpx;
			box-sizing: border-box;
		}
	}

	.account_icon {
		width: 42rpx;
		height: 36rpx;

		image {
			width: 42rpx;
			height: 36rpx;
		}
	}

	.pw_icon {
		width: 30rpx;
		height: 36rpx;
		margin: 0 6rpx;

		image {
			width: 30rpx;
			height: 36rpx;
		}
	}

	.divider {
		width: 3rpx;
		height: 50rpx;
		background: #72757F;
		margin: 0 20rpx 0 18rpx;
	}
	
	.remember_pw {
		width: 542rpx;
		display: flex;
		justify-content: flex-start;
		padding-left: 20rpx;
		box-sizing: border-box;
		margin: 52rpx 0 44rpx 0;
	}
	.login_btn {
		width: 542rpx;
		height: 87rpx;
		background: #FF586C;
		border-radius: 40rpx;
		font-weight: 500;
		font-size: 40rpx;
		color: #FFFFFF;
	}
	.tip {
		font-weight: 500;
		font-size: 21rpx;
		color: #7D7D7D;
		margin-top: 43rpx;
	}
	
	.staff_bg {
		width: 750rpx;
		height: 586rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		background: url(../../static/login/seller_login_bg.png) no-repeat;
		background-size: 160% 120%;
		background-position: -320rpx -120rpx;
		display: flex;
		flex-direction: column;
		padding: 40rpx;
		box-sizing: border-box;
		// image {
		// 	width: 750rpx;
		// 	height: 586rpx;
		// 	transform: scale(1.6) translateX(-60rpx);
		// 	z-index: 1;
		// }
		.nh {
			font-weight: bold;
			font-size: 70rpx;
			color: #FFFFFF;
			margin-top: 100rpx;
		}
		.welcome {
			font-weight: bold;
			font-size: 40rpx;
			color: #FFFFFF;
			margin: 27rpx 0 21rpx;
		}
		.service_type {
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
</style>